<template>
  <div class="picturebox">
    <div class="picture_div">
      <p class="picture_tit tit14">图片框属性</p>
      <div class="picturebox_list">
        <div class="list">
          <p>图片-X</p>
          <div class="picturebox_div">
            <div v-text="ellipsetoolx"></div>
          </div>
        </div>
        <div class="list">
          <p>图片-Y</p>
          <div class="picturebox_div">
            <div v-text="ellipsetooly"></div>
          </div>
        </div>
        <div class="list">
          <p>宽度</p>
          <div class="picturebox_div">
            <div v-text="ellipsetoolwidth"></div>
          </div>
        </div>
        <div class="list">
          <p>高度</p>
          <div class="picturebox_div">
            <div v-text="ellipsetoolheight"></div>
          </div>
        </div>
      </div>
      <div class="picture_tool">
        <div
          class="picture_tools"
          v-for="(v, i) in pictureTool"
          :key="i"
          :style="{ background: v.select ? ' #d4d4d4' : '#fff' }"
          @click="picturetoolsClick(i)"
        >
          <el-tooltip
            class="item"
            popper-class="tooltip"
            effect="dark"
            :content="v.text"
            placement="bottom"
          >
            <img :src="v.img" alt="" />
          </el-tooltip>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  data() {
    return {
      x: 0,
      y: 0,
      width: 0,
      height: 0,
      //锁&删除
      pictureTool: [
        { img: require("@/assets/img/key.png"), select: false, text: "上锁" },
        { img: require("@/assets/img/del.png"), select: false, text: "删除" },
      ],
    };
  },
  computed: {
    ...mapState("templateStage", [
      "modifyele",
      "ellipsetool",
      "listNote",
      "listImg",
      "listEllipse",
    ]),
    ellipsetoolx() {
      return Math.floor(this.ellipsetool.x);
    },
    ellipsetooly() {
      return Math.floor(this.ellipsetool.y);
    },
    ellipsetoolwidth() {
      return Math.floor(this.ellipsetool.width);
    },
    ellipsetoolheight() {
      return Math.floor(this.ellipsetool.height);
    },
  },
  watch: {
    deep: true, // 深度监听
    immediate: true, //初始化页面后立即监听
    index: null,
    datacolor: null,
  },
  methods: {
    picturetoolsClick(i) {
      if (this.historylist.length == 0) this.$emit("deductchild");
      let { select } = this.pictureTool[i];
      this.pictureTool[i].select = !select;
      if (i == 0) {
        if (this.pictureTool[i].select) {
          this.$emit("nonechild");
          this.$store.commit("templateStage/PICBOXADDKEYELE", this.modifyele);

          this.$emit("addtrans", this.modifyele);
        } else {
          this.$store.commit("templateStage/PICBOXDELKEYELE", this.modifyele);
          this.$emit("addtrans", this.modifyele);
        }
      } else if (i == 1) {
        if (this.pictureTool[i].select) {
          this.listEllipse.forEach((v, index) => {
            if (v.config.name == this.modifyele) {
              this.$store.commit("templateStage/PICBOXDELLISTIMG", index);
              this.$emit("delchild", false);
            }
          });
        }
      }
      this.$emit("deductchild");
    },
    pictureboxCon() {
      this.listEllipse.forEach((v) => {
        if (v.config.name == this.modifyele) {
          this.datacolor = v;
        }
      });
    },
    draggabletool() {
      if (this.ellipsetool.draggable == false) {
        this.pictureTool[0].select = true;
      } else {
        this.pictureTool[0].select = false;
      }
    },
  },
  created() {
    this.pictureboxCon();
    this.draggabletool();
  },
  beforeUpdate() {
    this.draggabletool();
  },
};
</script>

<style lang="less" scoped>
@import "../../assets/styles/frame.less";
.picturebox {
  color: @color2;
  .picture_div {
    width: 100%;
    padding: 0 20px;
    .picture_tit {
      font-size: 16px;
      margin-bottom: 22px;
    }
    .picturebox_list {
      width: 100%;
      .divDFJS();
      .list {
        width: 46%;
        margin-bottom: 14px;
        .divDSA();
        .picturebox_div {
          width: 60px;
          height: 26px;
          .bot();
          .cen();
          input {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
.picture_tool {
  margin-top: 8px;
  .divAJ();
  .picture_tools {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    .cen();
  }
}
</style>